export class AnimationClass {
    constructor(options) {
        this.arr = options.arr //关键帧样式数组
        this.sfLoopPlay = options.sfLoopPlay //是否循环
        this.intervalTime = options.intervalTime //动画间隔时间
        this.startTime = null
        this.render()
    }
    render() {
        // 主体逻辑: 初始化数据、帧动画、动画结束执行回调
        this.animCount = 0;
        this.settime && clearInterval(this.settime)
        for (let i = 0; i < this.arr.length; i++) {
            for (let j = 0; j < this.arr[i].anim.length; j++) {
                this.arr[i].anim[j].initData = this.initData(this.arr[i].anim[j]);
            }
        }
    }
    /*
        initData: 对数据进行初始化，将from、to中的信息转为数字，计算出动画的个数

        setCss: 逐帧执行，根据传入的单个动画对象和每帧的时间间隔，计算出当前帧的样式，并修改元素的style值
    */
    initData(obj) {
        // eslint-disable-next-line no-useless-escape
        let reg = /[-\d\.]+/g;
        let numArrFrom = obj.from.match(reg);
        let numArrTo = obj.to.match(reg);
        if (!numArrFrom || !numArrTo || numArrFrom.length == 0 || numArrTo.length == 0 || numArrFrom.length != numArrTo.length) {
            console.warn('数据输入错误');
        }
        for (let i = 0; i < numArrFrom.length; i++) {
            numArrFrom[i] = parseFloat(numArrFrom[i]);
            numArrTo[i] = parseFloat(numArrTo[i]);
        }
        let strArr = obj.from.split(reg);
        if (numArrFrom.length <= 0) {
            return;
        }
        this.animCount++;
        return {
            strArr: strArr,
            numArrFrom: numArrFrom,
            numArrTo: numArrTo,
            totalLength: strArr.length + numArrFrom.length,
            isEnd: false,
        }
    }
    setCss(obj, timeCount) {
        let styleStr = '';
        let tempCount = this.animCount;
        let target;
        // 将对象的多个动画，根据时间计算出样式，并合并
        for (let i = 0; i < obj.anim.length; i++) {
            target = obj.anim[i];
            if ((timeCount) > target.start && !target.initData.isEnd) {
                // 根据起止时间 计算出当前动画进度
                let percent = ((timeCount) - target.start) / (target.end - target.start);
                if (percent >= 1) {
                    percent = 1;
                    target.initData.isEnd = true;
                    tempCount--;
                }
                styleStr += getValue(percent);
            }
        }
        obj.dom.style.cssText += ';' + styleStr;
        this.animCount = tempCount;

        // 这里进行单个动画每帧样式的生成，这里是匀速运动
        function getValue(percent) {
            let numFrom = target.initData.numArrFrom;
            let numTo = target.initData.numArrTo;
            let arr = [];
            for (let i = 0; i < numFrom.length; i++) {
                arr.push(numFrom[i] + (numTo[i] - numFrom[i]) * percent);
            }
            let numIndex = 0;
            let strIndex = 0;
            let turnForNum = false;
            let str = target.style + ':';
            for (let i = 0; i < target.initData.totalLength; i++) {
                if (turnForNum) {
                    str += arr[numIndex];
                    numIndex++;
                    turnForNum = false;
                } else {
                    str += target.initData.strArr[strIndex];
                    strIndex++;
                    turnForNum = true;
                }
            }
            return str + ';';
        }
    }
    animate(timeCount) {
        // console.log(timeCount)
        if (!this.startTime) {
            this.startTime = timeCount
        }
        let progress = timeCount - this.startTime
        if (this.animCount > 0) {
            for (let i = 0; i < this.arr.length; i++) {
                this.setCss(this.arr[i], progress);
            }
            this.timer = requestAnimationFrame(this.animate.bind(this));
        }
        else {
            //如果开启循环
            if (this.sfLoopPlay) {
                this.settime = setTimeout(() => {
                    this.startTime = null
                    this.render()
                    this.timer = requestAnimationFrame(this.animate.bind(this));
                }, this.intervalTime)
            } else {
                this.destroy()
            }

        }
    }
    /**
     * @Author: zhangjinhao
     * @Date 2023-06-28 15:08:51
     * @Describe: 销毁动画及定时器
     */

    destroy() {
        cancelAnimationFrame(this.timer)
        clearInterval(this.settime)
    }
}